<template>
	<div class="bindWechat">
		<div class="form">
            <div class="title">绑定黄河人才网账号</div>
            <div class="dsc">创建或登录已有账号，与你现在登录的微信绑定后，可以使用微信账号或黄河人才网账号登录</div>
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item prop="phone">
                    <el-input type="text" maxlength="11" v-model.trim="form.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item prop="dragVerify">
                    <drag-verify ref="dragVerify" :width="330" :height="42" radius="0" :isPassing.sync="isPassingFlag" text="请按住滑块拖动" successText="验证通过" handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check">
                        <i v-show="!isPassingFlag" slot="textBefore" class="el-icon-lock"></i>
                    </drag-verify>
                </el-form-item>
                <el-form-item class="code" prop="code">
                    <el-input type="text" ref="code" maxlength="6" v-model.trim="form.code" placeholder="请输入验证码"></el-input>
                    <el-button type="text" :disabled="disabledFlag" @click="getCode">{{codeName}}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="btn" @click="submit">绑定</el-button>
                </el-form-item>
            </el-form>
        </div>
	</div>
</template>
<script type="text/javascript">
   // _wxTool.auth();
</script>
<script>
	import {getSmsCode,login,personInfo,getSmsCodeToken,resumeList} from '@/api/api'
	import dragVerify from "vue-drag-verify2";

	export default {
		//组件注入
		components: {dragVerify},
		//存放数据
		data() {
			//滑块验证校验方法
			var passcall = (rule, value, callback) => {
				if(this.isPassingFlag==false){
					return callback(new Error('请拖动滑块进行验证'));
				}else{
					callback();
				}
			};
			//同意协议校验方法
			var agree = (rule, value, callback) => {
				if(this.agreeFlag==false){
					return callback(new Error('请阅读并同意用户协议和隐私政策'));
				}else{
					callback();
				}
			};
			return {
                thirdToken:null,
				back:false,//返回上一页
				form:{
					phone:'',//手机号
					code:'',//验证码
				},
				isPassingFlag:false,//默认滑块验证状态
				agreeFlag:false,//同意隐私
				codeName:'获取验证码',
				disabledFlag: false,//获取验证码能否点击
				time: 60,
				rules: {
                    phone: [
                        { required: true, message: '请输入手机号码', trigger: 'blur' },
                        { validator: this.$telText, trigger: 'blur' },
					],
                    dragVerify: [
                        { validator: passcall, trigger: 'blur' },
					],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
					],
                    agree: [
                        { validator: agree, trigger: 'blur' },
					],
				}
			}
		},
		//接受父组件传递的值
        props:[],
		//监控data中的数据变化
		watch: {},
		//方法集合
		methods: {
			//微信快速登录
			wechatLoginPop(){
				this.wechatLoginFlag = !this.wechatLoginFlag
			},
			//切换登录注册
			changeType(type){
				this.type = type
				this.phone = ''
				this.code = ''
				this.disabledFlag = false
				//验证滑块重置
				this.isPassingFlag = false
				this.$refs.dragVerify.reset()
			},
			//获取验证码
			getCode(){
				this.$refs.form.validateField(['phone'],(valid) => {
					if(valid) return
					this.$refs.form.validateField('dragVerify', (valid) => {
						if(valid) return
						//获取验证码token
						getSmsCodeToken({
							'phone':this.form.phone
						}).then(res =>{
							if(res.code==200){
								var token = res.result.token
								var sign = this.$md5(token+this.form.phone+'EmxJk0VFBgtPfCU5XtZxiVk6rkIGBLwY')
								//获取验证码接口
								getSmsCode({
									'token': token,
									'mobile':this.form.phone,
									'sign':sign
								}).then(res =>{
									if(res.code==200){
										this.$message.success('验证码发送成功');
										let that = this
										that.disabledFlag = true
										let interval = window.setInterval(function() {
											that.codeName = '已发送' + that.time + 's';
											--that.time;
											if(that.time < 0) {
												that.codeName = "重新发送";
												that.time = 60;
												that.disabledFlag = false;
												window.clearInterval(interval);
											}
										}, 1000);
									}else{
										this.$message.error(res.message);
									}
								});
							}else{
								this.$message.error(res.message);
							}
						});
					})
				});
			},
			//注册/登录
			submit(){
				this.$refs.form.validate((valid) => {
					if(valid) {
						//登录接口
						login({
							'mobile':this.form.phone,
							'password': this.form.code,
                            'loginToken':this.thirdToken,
                            'loginType':'WX_LOGIN_BIND',
							'roleType': '0',
						}).then(res =>{
							console.log(res);
                           // console.log("临时暂停");
							//return;
							if(res.code==200){
								//存储登录状态token
								localStorage.setItem('loginStatus',1)
								localStorage.setItem('X-Access-Token',res.result.token)
								localStorage.setItem('userId',res.result.id)
								if(res.result.infoFlag&&res.result.eduFlag&&res.result.intentionFlag){
									//获取用户信息
									personInfo({
										'id': res.result.id
									}).then(res =>{
										if(res.code==200){
											localStorage.setItem('userInfo',JSON.stringify(res.result))
											//简历列表
											resumeList().then(res =>{
												if(res.code==200){
													let list = res.result.records
													for(let i in list){
														if(list[i].lanType==0&&list[i].type==0){
															localStorage.setItem('resumeId',list[i].id)
														}
													}
													//登录成功去首页
													this.$message.success('登录成功');
													//有第一份简历去首页
													setTimeout(()=>{
														if(this.back){
															this.$router.go(-1)
														}else{
															this.$router.push({name:'Index'})
														}
													},1000)
												}
											});
										}
									});
								}else{
									var firstResume = {
										resumId:res.result.resumId,//简历id
										eduId:res.result.eduId,//教育经历id
										workId:res.result.workId,//工作经验id
										intentionId:res.result.intentionId,//求职意向id
									}
									localStorage.setItem('firstResume',JSON.stringify(firstResume))
									localStorage.setItem('resumeId',res.result.resumId)
									//获取用户信息
									personInfo({
										'id': res.result.id
									}).then(res1 =>{
										if(res.code==200){
											localStorage.setItem('userInfo',JSON.stringify(res1.result))
											if(!res.result.infoFlag){
												//去填第一份简历 个人信息
												setTimeout(()=>{
													this.$router.push({name:'FirstResume',query:{stepsActive:0}})
												},1000)
											}else if(!res.result.eduFlag){
												//去填第一份简历 教育经历
												setTimeout(()=>{
													this.$router.push({name:'FirstResume',query:{stepsActive:1}})
												},1000)
											}else if(!res.result.workFlag){
												if(res1.result.jobFlag==0){
													//应届生实习生跳过工作经验
													setTimeout(()=>{
														this.$router.push({name:'FirstResume',query:{stepsActive:3}})
													},1000)
												}else if(res1.result.jobFlag==1){
													//去填第一份简历 工作经验
													setTimeout(()=>{
														this.$router.push({name:'FirstResume',query:{stepsActive:2}})
													},1000)
												}
											}else if(!res.result.intentionFlag){
												//去填第一份简历 求职意向
												setTimeout(()=>{
													this.$router.push({name:'FirstResume',query:{stepsActive:3}})
												},1000)
											}
										}
									});
								}
							}else{
								this.$message.error(res.message);
							}
						});
					}else{
						return false;
					}
				});
			},
		},
		//生命周期 - 创建完成（可以访问当前this实例）
		created() {

        },
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {
			this.back = this.$route.query.back;

            this.thirdToken=this.$route.query.thirdToken;
            console.log('thirdToken',this.thirdToken)
		}
	};
</script>
<style lang="scss">
	@mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	@mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
	@mixin transition{transition: all .3s;}
	.bindWechat{min-height: 100vh;height: auto;overflow: hidden;background: #F6F6F6;
        .form{width: 410px;height: auto;overflow: hidden;margin: 20vh auto;background: #fff;padding: 40px;
            .title{font-size: 20px;color: #000;font-weight: bold;margin-bottom: 20px;
                span{width: 44px;height: 24px;line-height: 24px;font-size: 14px;color: #fff;font-weight: normal;border-radius: 10px 0px 10px 0px;background: #E54437;display: inline-block;text-align: center;vertical-align: 2px;margin-left: 5px}
            }
            .dsc{font-size: 14px;color: #666;}
            .el-form{height: auto;overflow: hidden;margin-top: 30px;}
            .el-form-item{position: relative;overflow: hidden;
                .el-input{position: relative;z-index: 0;}
                .el-input__inner{height: 42px;line-height: 42px;border-radius: 0;}
                .drag_verify{line-height: 40px !important;border: 1px solid #DCDFE6}
                &.code{
                    .el-button{height: 40px;padding: 0 15px;position: absolute;z-index: 1;right: 1px;top: 1px;
                        span{position: relative;top: -1px;}
                    }
                }
            }
            .btn{width: 100%;height: 50px;font-size: 16px;border-radius: 0;}
        }
	}
</style>
